<template>
    <div class="budget-line-chart" ref="lineChartBox">
    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import {ref, onMounted,onUnmounted, watch} from 'vue'
const props = defineProps(['lineChartData'])
let lineChart:any = null
let lineChartBox = ref<HTMLElement>()
let lineOption = {
    title: {
        text: '总净收入趋势',
        left: '40%'
    },
    xAxis: {
        type: 'category',
        data: props.lineChartData.date
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            data: props.lineChartData.amount,
            type: 'line',
        }
    ],
    emphasis:{
        label: {
            show: true,
            position: 'top',
            formatter: '{c}' // 使用 {c} 表示系列中的数据值
        }
    }
}

watch(()=>props.lineChartData, () => {
    lineOption.xAxis.data = props.lineChartData.date
    lineOption.series[0].data = props.lineChartData.amount
    if (lineChart)
        lineChart.setOption(lineOption)
})

onMounted(()=>{
    lineChart = echarts.init(lineChartBox.value)
    lineChart.setOption(lineOption)
})


</script>

<style scoped>
.budget-line-chart {
    width: 100%;
    height: 90%;
}
</style>